<template>
  <!-- 登陆界面  -->
  <div class="login">
    <!-- 表单组件，设置ref、绑定数据form，设置顶部对齐 -->
    <!-- 使用:rules="rules"对输入内容进行校验 -->
    <el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
      <!-- 表单元素，上面使用prop指向校验规则 -->
      <el-form-item label="请输入手机号" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="请输入密码" prop="password">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <!-- 表单按钮 -->
      <el-form-item>
        <!-- 绑定按钮加载中数据 -->
        <el-button type="primary" @click="onSubmit" :loading="loading">登 录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入外部mogin用户登录模块
import { login } from '../../services/user'
export default {
  // 命名组件
  name: 'login',
  // 数据
  data () {
    return {
      // 表单绑定数据
      form: {
        phone: '17201234567',
        password: 'qsryja'
      },
      // 校验规则
      rules: {
        // 手机号
        phone: [
          // 必填、正则、错误提示、失去焦点触发校验
          { required: true, pattern: /^1\d{10}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        // 密码
        password: [
          // 必填、6-18位、错误提示、失去焦点触发校验
          { required: true, min: 6, max: 18, message: '请输入6-18位密码', trigger: 'blur' }
        ]
      },
      // 控制按钮是否处于加载中不可点击状态
      loading: false
    }
  },
  // 方法
  methods: {
    // 点击按钮事件。
    // async - 进行异步语法处理，这职位async函数
    async onSubmit () {
      // 使用try - catch替换掉原来的if-else
      // try里面的代码依次执行，一旦发生错误，立马跳到catch里面执行catch里面的代码
      try {
        // 使用await接收结果，这里接收返回的值
        // 判断校验收否通过，通过继续向下执行，否则执行catch
        await this.$refs.form.validate()
        // 点击后设置按钮加载中为true
        this.loading = true
        // 直接调用login进行用户登陆，传入form数据
        const { data } = await login(this.form)
        // 判断data的state是否为1，1表示用户名和密码正确
        if (data.state === 1) {
          // 调用vuex的store模块，向内传输数据
          this.$store.commit('setUserInfo', data)
          // 跳转到主页，并且直接使用参数，如果没有参数跳转到主页
          this.$router.push(this.$route.query.go || '/')
          // 提示登录成功
          this.$message.success('登陆成功')
        } else {
          // 提示错误信息
          this.$message.error('请检查您输入的手机号或密码是否有误')
          // 如果校验失败恢复按钮状态
          this.loading = false
        }
      } catch (err) {
        console.log('校验失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  .el-form {
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
  }
  .el-button {
    width: 100%;
  }
}
</style>
